<template>
  <div class="app-container">
    <el-row :gutter="40">
      <el-col :sm="24" :lg="6" v-for="item in totalList" :key="item">
        <panel-group :data="item"></panel-group>
      </el-col>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="list"
      style="margin-top:30px"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="买家手机号">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column align="center" label="订单物品">
        <template slot-scope="scope">{{ scope.row.ordername }}</template>
      </el-table-column>
      <el-table-column label="购买日期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buy_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="序列码" align="center">
        <template slot-scope="scope">{{ scope.row.serial_number }}</template>
      </el-table-column>
      <el-table-column label="快递码" align="center">
        <template slot-scope="scope">{{ scope.row.express_number }}</template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-popover placement="left" width="300" trigger="hover">
            <div class="popover-content">订单当前状态：下单方已取消</div>
            <div class="popover-content">订单号：orderK901717359767947</div>
            <el-timeline class="el-timeline" :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.timestamp"
              >{{activity.content}}</el-timeline-item>
            </el-timeline>
            <span slot="reference">{{scope.row.status}}</span>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import PanelGroup from "@/components/PanelGroup";
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      totalList: [
        {
          icon: "el-icon-star-on",
          title: "今日新增订单数",
          total: "102",
        },
        {
          icon: "el-icon-star-on",
          title: "本月新增订单数",
          total: "102",
        },
        {
          icon: "el-icon-star-on",
          title: "总数量",
          total: "3000",
        },
      ],
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      this.list = [
        {
          id: 1,
          username: "15722222222",
          ordername: "鞋子",
          buy_time: "2020.2.2",
          serial_number: "xuliehao13133113331",
          express_number: "kuaidi657646464446",
          status: "买家发货了",
        },
        {
          id: 1,
          username: "15722222222",
          ordername: "鞋子",
          buy_time: "2020.2.2",
          serial_number: "xuliehao13133113331",
          express_number: "kuaidi657646464446",
          status: "买家发货了",
        },
      ];
      this.listLoading = false;
    },
    hoverItem() {
      console.log(1);
    },
  },
  components: {
    PanelGroup,
  },
};
</script>

<style lang="scss">
.popover-content {
  margin: 15px 0;
}
.el-timeline {
  margin-left: -40px;
}
</style>
